<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下拉菜单</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!--
点击按钮就会弹出一个下拉框，然后点击页面中其他空白区域（除下拉框本身外），下拉框就关闭。
要点：
1、点击下拉框本身是不会关闭的；2、点击下拉框以外的所有区域都要关闭；3、点击所有区域可以在document上绑定click
-->

<div id="app" v-cloak>
    <div class="main" v-clickoutside="handleClose">
        <button type="button" @click="show=!show">点击显示下拉菜单</button>
        <div class="dropdown" v-show="show">
            <p>下拉框的内容，点击外面区域可以关闭</p>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="clickoutside.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
